<template>
    <div>
        <div>
        <el-dialog title="新增订单" :visible.sync="dialogVisible" width="60%">
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="充电桩名称：">
                    <el-input v-model="form.pileName"></el-input>
                </el-form-item>
                <el-form-item label="充电桩状态">
                    <el-input v-model="form.status"></el-input>
                </el-form-item>
                <el-form-item label="最新上线时间">
                    <el-date-picker
                    v-model="form.startTime"
                    type="datetime"
                    placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="故障时间">
                    <el-input v-model="form.failTime"></el-input>
                </el-form-item>
                <el-form-item label="故障内容">
                    <el-input v-model="form.failStatus"></el-input>
                </el-form-item>
                <el-form-item label="故障次数">
                    <el-input v-model="form.failNum"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="makeAddSure">确 定</el-button>
            </span>
        </el-dialog>
        <el-button type="primary" @click="add">新增</el-button>
        <el-button type="danger" :disabled="!pileIds.length > 0"  @click="del">删除</el-button>
        <el-input placeholder="请输入设备名称" v-model="filterParams.pileName"></el-input>
        <el-button type="primary" style="background:#007761" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button @click="reset">重置</el-button>
    </div>
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
            @selection-change="handleSelectionChange" class="order">
            <el-table-column type="selection" width="150">
            </el-table-column>
            <el-table-column type="index" width="150" label="序号">
            </el-table-column>
            <el-table-column prop="pileName" label="充电桩名称" width="150">
            </el-table-column>
            <el-table-column prop="status" label="充电桩状态" width="150">
                <template slot-scope="scope">
                    <div>{{scope.row.status===0?'正常':scope.row.status===1?'占用':'告警'}}</div>
                </template>
            </el-table-column>
            <el-table-column prop="startTime" label="最近一次上线时间" width="150">
            </el-table-column>
            <el-table-column prop="failTime" label="故障时间" width="150">
            </el-table-column>
            <el-table-column prop="failStatus" label="故障内容" width="150">
            </el-table-column>
            <el-table-column prop="failNum" label="累计故障次数" width="150">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="150" align="center">
                <template slot-scope="scope">
                    <el-button @click.native.prevent="updataRow(scope.$index, tableData)" size="small">
                        编辑
                    </el-button>
                    <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="danger" size="small">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="total" :page-size="filterParams.size"
            @current-change="pageChange" style="float:right">
        </el-pagination>
    </div>
</template>
<script>
import TopBar from '@/components/top-bar.vue';
import API from '@/api/index'
import {MessageBox} from 'element-ui'
import  DateType  from '../../until/date-typepx';
export default {
    created() {
        this.getPileData()
    },
    data() {
        return {
            form:{},
            dialogVisible:false,
            tableData: [],
            filterParams: {
                page: 1,
                size: 6
            },
            pileIds:[],
            total: 0,
            updataId:''
        }
    },
    components: {
        TopBar
    },
    methods: {
        async getPileData() {
            const data = await API.getPileData({ ...this.filterParams })
            this.tableData = data.data
            this.total = data.total
        },
        pageChange(page) {
            this.filterParams = { ...this.filterParams, page }
            this.getPileData()
        },
        deleteRow(index, scope) {
            this.pileIds = [scope[index].pileId]
            this.del()
        },
        async del() {
            await MessageBox.confirm("是否确认删除?", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
            await API.delPileData({ pileIds: this.pileIds })
            this.$message.success('删除成功')
            this.pileIds = []
            this.getPileData()
        },
        async updataRow(index, scope) {
            this.updataId = scope[index].pileId
            const data = await API.getPileDetail({ pileId: this.updataId })
            this.form = data.data[0]
            this.dialogVisible = true
        },
        add(){
            this.form = {}
            this.dialogVisible=true
        },
        search(){
            this.getPileData({ ...this.filterParams, page: 1 })
        },
        reset(){
            this.filterParams = { page: 1, size:6  }
            this.getPileData({ ...this.filterParams })
        },
        handleSelectionChange(data) {
            this.pileIds = data.map(val => val.pileId)
        },
        async makeAddSure() {
            this.form.startTime=DateType(this.form.startTime)
            if (this.form.pileId) {
                await API.updataPileData({ ...this.form })
                this.getPileData({ ...this.filterParams })
            } else {
                await API.addPileData({ ...this.form })
                this.getPileData({ ...this.filterParams })
            }
            this.dialogVisible = false

        },
    }
}
</script>

<style scoped>
.el-input {
    width: 300px
}
</style>